<template>
  <div class="merchant2">
    <Row>
	  	<Col span="6">
	  		<span>年份：</span>
		  	<Select v-model="yearValue" style="width:150px">
		        <Option v-for="year in yearList" :value="year.value" :key="year.value">{{ year.label }}</Option>
		    </Select>
	  	</Col>
	  	<Col span="12"><Button icon="ios-text-outline" shape="circle" type="primary" ghost>短信催缴</Button>&nbsp;
	  		<Button icon="ios-cloud-upload-outline" shape="circle" type="primary" ghost>上传缴费状态</Button>
	  	</Col>
	  	<Col span="6">
			<Input search enter-button placeholder="商户名称" @on-search="handleSearch"/>
		</Col>
    </Row>
    <br>
	<Table ref="table" :max-height="maxHeight" stripe :columns="columns" :data="data" border highlight-row @on-selection-change="handleSelectChange">
	 	<template #merchant_type="{ row }"><Icon :custom="'iconfont '+row.merchant_type" color="#ff9900" />&nbsp;{{row.merchant_text}}</template>
		<template #action="{ row ,index}">
		<div class="ty-flex-row-around">
			<Button icon="ios-eye" @click="merchantpreview(row, index)" shape="circle"></Button>
		</div>
		</template>
		<template #fee_status="{ row ,index}">
			
			<div class="ty-flex-row-around" v-if="editIndex === index">
			  <Button icon="md-checkmark" type="success" @click="handleSaveStatus(row.rank,'已缴')"></Button> &nbsp;
			  <Button icon="md-close" type="error" @click="handleSaveStatus(row.rank,'未缴')"></Button>
			</div>
			<div class="ty-flex-row-around" v-else>
				<Tag v-if="row.fee_status=='已缴'" color="green">{{row.fee_status}}</Tag>
				<Tag v-else color="red">{{row.fee_status}}</Tag>
				<Button custom-icon="iconfont icon-bianji" @click="handleEditRow(row, index)" shape="circle"></Button>
			</div>
		</template>
	</Table>
	<div style="margin: 8px auto;"><Page v-model="page" :total="total" show-total @on-change="handlePageChange"/></div>
	<Modal v-model="previewModal" title="文书预览" :width="50" :footer-hide="true" :styles="{top: '20px'}">
        <iframe scrolling="no" frameborder="0" :src="previewUrl" style="width:100%;height:80vh"></iframe>   
    </Modal>
  </div>
</template>
<script>
import config from '@/config'
import {dateUtils} from '@/libs/tools.js'
export default{
	data(){
		return {
			columns:[
				{type: 'selection', width: 60,align: 'center'},
				{title:'编号',key:'rank',minWidth:80},
	        	{title:'道路路段',key:'road',minWidth:100},
	        	{title:'行业类别',slot:'merchant_type',minWidth:100},
        		{title:'商户名称',key:'merchant_name',minWidth:150},
				{title:'地址',key:'address',minWidth:150},
        		{title:'负责人',key:'contact_name',minWidth:80},
        		{title:'联系电话',key:'contact_phone',minWidth:130},
        		{title:'统一信用码',key:'reg_num',minWidth:150},
        		{title:'核定面积',key:'area',minWidth:100},
        		{title:'费用',key:'fee',minWidth:80},
				{title:'核定人',key:'legal_name',minWidth:80},
        		{title:'缴费状态',slot:'fee_status',minWidth:120},
        		{title:'预览',slot:'action',minWidth:80},
	        ],
	        data:[],
			page:1,
			total:0,
	        yearList:dateUtils.getLast3Years(),
	        yearValue:dateUtils.getCurrentYear(),
	        searchKey:'',
	        previewModal:false,
	        previewUrl:'',
			editIndex:-1
		}
	},
    computed: {
        maxHeight(){
          return window.innerHeight-200
        }
    },
	methods:{
		handleSearch(value){
			this.searchKey=value
			this.getMainMerchant2List(value)
		},
		getMainMerchant2List(searchKey){
			this.$axios.post("mainMerchant2List.action",
					{str1:this.searchKey,int1:this.yearValue,int2:(this.page-1)*10,int3:10}).then(res=>{
				this.total=res.data.total
				this.data=res.data.list
			})
		},
		merchantpreview(row, index){
			this.previewModal=true
			this.previewUrl=config.baseUrl+'doc/tangyin/docs/'+row.year+'/check/'+row.rank+'.pdf'
		},
		handleEditRow (row, index) {
		     this.editIndex = index;	
		},
		handleSaveStatus(rank,status){
			
			this.$axios.post("mainMerchant2SaveStatus.action",{str1:status,int1:rank}).then(res=>{
				this.data[this.editIndex]["fee_status"]=status
				this.editIndex=-1
			})
		},
		handleSelectChange(selection){
			console.info(selection)
		},
		handlePageChange(e){
			this.page=e
			this.getMainMerchant2List(this.searchKey)
		},
	},
	mounted(){
		this.getMainMerchant2List(this.searchKey)
	}
}
</script>